<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>transition</title>
	<style>
		div {
			width: 400px;
			height: 150px;
			background-color: orange;
			/* 通常是配合hover 使用。 穿越火线官网的小图标跳动，可能是这个实现的。
				transitioon: 要过渡的属性 花费时间 运动曲线 何时开始(延时时间);
				如果有多组属性，用逗号隔开
			*/
			transition: width 1s ease 0s, height 1s ease 0s, background-color 1s ease 0s;	

			/* 也可以直接指定所有的属性, 使用all */
			/*transition:  all 1s ease 0s;*/
			}

		div:hover {
			width: 800px;
			height: 50px;
			background-color: pink;
		}
	</style>
</head>
<body>
	<div>
	</div>
</body>
</html>